<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-col :span="24">
          <a-form-item label="户名" v-bind="validateInfos.name">
            <a-input v-model:value="formData.name" placeholder="请输入户名" disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="账号" v-bind="validateInfos.account">
            <a-input v-model:value="formData.account" placeholder="请输入账号" disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="开户行" v-bind="validateInfos.bank">
            <a-input v-model:value="formData.bank" placeholder="请输入开户行" disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="用户编号" v-bind="validateInfos.zsyhUid">
            <a-input v-model:value="formData.zsyhUid" placeholder="请输入用户编号" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="银行SM公钥" v-bind="validateInfos.zsyhBankSm2PubKey">
            <a-textarea :rows="3" v-model:value="formData.zsyhBankSm2PubKey" placeholder="请输入银行SM公钥" :disabled="disabled"></a-textarea>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="用户SM私钥" v-bind="validateInfos.zsyhUserSm2PriKey">
            <a-input v-model:value="formData.zsyhUserSm2PriKey" placeholder="请输入用户SM私钥" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="用户对称密钥" v-bind="validateInfos.zsyhUserSm4Key">
            <a-input v-model:value="formData.zsyhUserSm4Key" placeholder="请输入对称密钥（SM4密钥）" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="formData.id">
          <span style="color:red;margin-left: 160px;">温馨提示：此次配置会覆盖之前的数据，请谨慎操作！</span>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
import {computed, defineExpose, defineProps, nextTick, reactive, ref} from 'vue';
import {useMessage} from '/@/hooks/web/useMessage';
import {queryByCompanyId, set} from '../CaishuiServiceCompany.api';
import {Form} from 'ant-design-vue';

const props = defineProps({
    formDisabled: { type: Boolean, default: false },
    formData: { type: Object, default: ()=>{} },
    formBpm: { type: Boolean, default: true }
  });
  const formRef = ref();
  const useForm = Form.useForm;
  const emit = defineEmits(['register', 'ok']);
  const formData = reactive<Record<string, any>>({
    id: '',
    companyId: '',   
    account: '',
    name: '',   
    bank: '',   
    bankCode: '',   
    zsyhUid: '',   
    zsyhBankSm2PubKey: '',   
    zsyhUserSm2PriKey: '',   
    zsyhUserSm4Key: '',   
  });
  const { createMessage } = useMessage();
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
  const confirmLoading = ref<boolean>(false);
  //表单验证
  const validatorRules = {
    zsyhUid: [{ required: true, message: '请输入用户编号!'},],
    zsyhBankSm2PubKey: [{ required: true, message: '请输入银行SM公钥!'},],
    zsyhUserSm2PriKey: [{ required: true, message: '请输入用户SM私钥!'},],
    zsyhUserSm4Key: [{ required: true, message: '请输入对称密钥（SM4密钥）!'},],
  };
  const { resetFields, validate, validateInfos, clearValidate } = useForm(formData, validatorRules, { immediate: true });

   // 表单禁用
   const disabled = computed(()=>{
      let bool = false;
      if(props.formBpm === true){
        if(props.formData.disabled === false){
          bool = false;
        }else{
          bool =  true;
        }
      }
      bool = props.formDisabled;
      //清除表单验证
      clearValidate();
      return bool;
   });

  /**
   * 配置
   */
  async function setBank(record) {
    confirmLoading.value = true;
    await queryByCompanyId({companyId: record.id})
      .then((res) => {
        nextTick(() => {
          resetFields();
          //赋值
          Object.assign(formData, res.result);
          formData.companyId = record.id;
          formData.account = record.bankCard;
          formData.name = record.bankAccount;
          formData.bank = record.bankName;
          formData.bankCode = record.bankCode;
        });
      })
      .finally(() => {
        confirmLoading.value = false;
      });
  }

  /**
   * 提交数据
   */
  async function submitForm() {
    // 触发表单验证
    await validate();
    confirmLoading.value = true;
    //数据格式化
    let model = formData;
    await set(model)
      .then((res) => {
        if (res.success) {
          createMessage.success(res.message);
          emit('ok');
        } else {
          createMessage.warning(res.message);
        }
      })
      .finally(() => {
        confirmLoading.value = false;
      });
  }

  defineExpose({
    setBank,
    submitForm,
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    overflow-y: auto;
    padding: 24px 24px 24px 24px;
  }
</style>
